<!-- 模块说明 -->
<template>
  <div class="container">
    <el-table
      ref="multipleTable"
      :data = "fileData"
      tooltip-effect = "dark"
      style = "width: 100%"
      @selection-change="row_been_selected">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="f_name"
        label="文件名"
        width="150">
      </el-table-column>
      <el-table-column
        prop="f_path"
        label="路径"
        width="200">
      </el-table-column>
      <el-table-column
        prop="f_ex"
        label="文件类型"
        width="120">
        <template slot-scope="scope">
          {{scope.row.f_ex + ' 文件'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="f_size"
        label="文件大小">
        <template slot-scope="scope">
          <!-- {{scope.row}} -->
          {{scope.row.f_size | bit}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="180">
        <template slot-scope="scope">
          <el-button type="primary" round size="mini" icon="el-icon-download" @click="downLoadSelection(scope.row)">下载</el-button>
          <el-button type="info" round size="mini" icon="el-icon-edit" @click="editFile(scope.row)">编辑</el-button>
          <el-button type="danger" round size="mini" icon="el-icon-delete" @click="deleteFile(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑文件对话框 -->
    <el-dialog
      title="编辑文件信息"
      :visible.sync="editDialogVisible"
      width="30%">
      <el-form :model="editInfo" label-width="80px" :rules="editFileReg" ref="editForm">
        <el-form-item label="文件名称" prop="f_name">
          <el-input v-model="editInfo.f_name"></el-input>
        </el-form-item>
        <el-form-item label="文件路径" prop="f_path">
          <el-input v-model="editInfo.f_path"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeFileInfo">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="确认删除"
      :visible.sync="deleteDialogVis"
      width="30%">
      <span>删除操作不可逆，确认要删除该文件吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVis = false">取 消</el-button>
        <el-button type="primary" @click="deleteNow">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getFiles } from '@/api/get_files.js'
import { fileUpdate } from '@/api/updateFile.js'
import { fileDelete } from '@/api/deleteFile.js'
export default {
  // 组件注册
  components: {},
  mixins: [],
  props: [],
  data () {
    const checkFileName = (rule, value, cb) => {
      const regName = /\.[a-zA-Z0-9]+/
      // 若文件名包含.则正常返回
      if (regName.test(value)) return cb()
      // 否则返回错误
      return cb(new Error('请输入带扩展名的文件名'))
    }
    const checkFilePath = (rule, value, cb) => {
      const regPath = /[/]$/
      // 若路径以/结尾则正常返回
      if (regPath.test(value)) return cb()
      // 否则返回错误
      return cb(new Error('文件路径需以/结尾'))
    }
    return {
      fileData: [],
      selectedFile: [],
      // fUser: 'tester1',
      fUser: this.$store.state.user,
      editInfo: {
        f_name: '',
        f_path: ''
      },
      deleteId: 0,
      // 对话框显示控件
      editDialogVisible: false,
      deleteDialogVis: false,
      // 文件编辑表单校验对象
      editFileReg: {
        f_name: [
          { required: true, message: '请输入文件名', trigger: 'blur' },
          { validator: checkFileName, trigger: 'blur' }
        ],
        f_path: [
          { required: true, message: '请输入存储路径', trigger: 'blur' },
          { validator: checkFilePath, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  watch: {},
  methods: {
    // 获取文件列表函数
    async getFileData (fUser) {
      const { data } = await getFiles(fUser)
      console.log(data)
      this.fileData = data
    },
    // 变更所选文件函数
    row_been_selected (selection) {
      const tmpList = []
      for (const i in selection) {
        console.log(selection[i].f_name)
        tmpList.push({
          f_name: selection[i].f_name,
          f_path: selection[i].f_path
        })
      }
      this.selectedFile = tmpList
      console.log(this.selectedFile)
    },
    // 下载所选文件
    async downLoadSelection (info) {
      window.open(`http://127.0.0.1:8000/sfile/download/?f_name=${info.f_name}&f_path=${info.f_path}&f_user=${this.fUser}`)
    },
    // 编辑按钮点击事件
    editFile (row) {
      console.log(row)
      this.editInfo.f_path = row.f_path
      this.editInfo.f_name = row.f_name
      this.editInfo.id = row.id
      this.editDialogVisible = true
    },
    // 弹出框确认按钮点击事件
    async changeFileInfo () {
      // 向后台提交变更后的文件信息
      console.log(this.editInfo)
      const { data } = await fileUpdate(this.editInfo)
      if (data.status === 200) {
        // 重新请求文件文件列表
        this.getFileData(this.fUser)
        console.log(this)
        this.$notify({
          title: '修改成功',
          type: 'success',
          message: data.msg
        })
      }
      this.editDialogVisible = false
    },
    // 删除按钮点击事件
    deleteFile (row) {
      this.deleteId = row.id
      this.deleteDialogVis = true
    },
    // 删除提示框确认按钮点击事件
    async deleteNow () {
      const { data } = await fileDelete(this.deleteId)
      console.log(data)
      if (data.status === 200) {
        // 重新请求文件列表
        this.getFileData(this.fUser)
        // 弹出提示框
        console.log(this)
        this.$notify({
          title: '操作成功',
          type: 'success',
          message: data.msg
        })
      } else {
        console.log(this)
        this.$notify({
          title: '操作失败',
          type: 'error',
          message: data.msg
        })
      }
      this.deleteDialogVis = false
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getFileData(this.fUser)
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {},
  destroyed () {}
}
</script>
<style lang="less" scoped>
  .container {
    height: 100%;
    .left {
      display: flex;
      align-items: center;
      span {
        font-size: 22px;
        padding: 0 12px;
      }
      img {
        width: 9%;
      }
    }
  }
  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-header {
    display: flex;
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 70px;
    justify-content: space-between;
    // 右侧按钮垂直居中
    align-items: center;
    // 取消el-header默认的左内边距
    padding-left: 0;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E6EEE6;
    color: #333;
    text-align: center;
    line-height: 60px;
    border: 0;
    padding: 0;
  }
  // body > .el-container {
  //   margin-bottom: 40px;
  // }
  .el-menu {
    border-right: none;
  }

</style>
